
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>洋芋博客 - 一个什么都分享的博客</title>
        <link rel="shortcut icon" type="image/x-icon" href="image/yangyuBlogLogo.png"/>
        <link rel="stylesheet" type="text/css" href="css/homePage.css"/>
    </head>
    <body onload="addDiv()">

        <div class="navigationBar">
            <div class="navigationBarCenterBox">
                <div class="blogTitleBox">
                    <div class="beforeBlogBigTitleBox">
                    </div>
                    <div class="blogBigTitleBox">
                        <a class="blogTitleHyperlink" href="http://localhost:8080/homePage.jsp">洋芋博客</a>
                    </div>
                    <div class="blogSmallTitleBox">
                        一个什么都分享的博客
                    </div>
                </div>
                <div class="navigationBox">
                    <div class="navigationTopBox">
                    </div>
                    <div class="navigationCenterBox">
                        <div class="buttonBox">
                            <a href="http://localhost:8080/readPage.jsp?id=1">友链互换</a>
                        </div>
                        <div class="buttonBox">
                            <a href="adminPage.jsp">管理</a>
                        </div>
                        <div class="buttonBox">
                            <div class="navigationSame" onclick="showCategoryArticle('原创')">原创</div>
                        </div>
                        <div class="buttonBox">
                            <div class="navigationSame" onclick="showCategoryArticle('公告')">公告</div>
                        </div>
                        <div class="buttonBox">
                            <a href="http://localhost:8080/homePage.jsp">首页</a>
                        </div>
                    </div>
                    <div class="navigationBottomBox">
                    </div>
                </div>
            </div>
        </div>

        <div id="subjectBox">
            <div id="topShowBox">

            </div>
            <div id="leftContentBox">

            </div>

            <div id="rightLabelBox">
                <div class="rightLabelBigBox">
                    <div class="searchOutBox">
                        <input id="searchArticle" type="text" placeholder="Search...">
                        <div id="searchButton" onclick="searchArticle()">→</div>
                    </div>

                </div>
                <div class="rightLabelBigBox">
                    <div class="rightLabelTitleBox">近期文章</div>
                    <div id="recentArticleContentBox">

                    </div>
                </div>
                <div class="rightLabelBigBox">
                    <div class="rightLabelTitleBox">分类</div>
                    <div id="categoryContentBox">

                    </div>
                </div>
                <div class="rightLabelBigBox">
                    <div class="rightLabelTitleBox">友情链接</div>
                    <div id="blogrollBox">
                        <div class="blogBox"><a href="https://shagain.club/" target="_black">小小博客</a></div>
                        <div class="blogBox"><a href="http://www.shitang.ink/" target="_black">石塘义工队</a></div>
                        <div class="blogBox"><a href="https://www.jhacd.com/" target="_black">玖华博客</a></div>
                        <div class="blogBox"><a href="https://www.51fanqie.cn/" target="_black">番茄博客</a></div>
                        <div class="blogBox"><a href="https://www.ylingyun.cn/" target="_black">轻博客</a></div>
                        <div class="blogBox"><a href="https://www.yudada.cn" target="_black">鱼大大博客</a></div>
                        <div class="blogBox"><a href="https://liberatews.com/" target="_black">练习一坤年的博客</a></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottomCopyrightBox">
            <div class="copyrightCenterBox">
                <div class="copyrightCenterTopBox">
                </div>
                <div class="icpBox">
                    <a href="https://beian.miit.gov.cn/">蜀ICP备2021028107号-1</a> &nbsp;| &nbsp;<a href="">站点地图</a>
                </div>
                <div class="copyrightBox">
                    ©Copyright 2023 <a href="http://localhost:8080/homePage.jsp">洋芋博客</a> All Rights Reserved.Powered by
                    <a href="https://blog.51yangyu.cn/">洋芋博客</a>
                </div>
            </div>
        </div>
    </body>

    <script src="js/axios.min.js"></script>
    <script type="text/javascript">
        //获取需要插入的内容的html
        var divHtml = "";
        var tenRecentArticleHtml = "";
        var recentArticleHtml = "";
        var categoryHtml = "";
        var count = 0;
        <%
        ArticleDao articleDao=new ArticleDao();
        List<ArticleBean> articleBeanList=articleDao.getArticleInformation();
        Collections.reverse(articleBeanList);
        for(ArticleBean articleBean:articleBeanList){
         %>
        var state = "<%=articleBean.getState()%>";
        if (state === "已发布") {
            divHtml += '<div class="showBox"><div class="categoryBigBox"><div class="categorySmallBox"><div class="categoryLink" onclick="showCategoryArticle(\'' + '<%=articleBean.getCategory() %>' + '\')">' + '<%=articleBean.getCategory() %>' +
                '</div></div><div class="releaseTimeBox"><div class="categoryLink" onclick="showArticleByTime(\'' + '<%=articleBean.getRelease_time()%>' + '\')">' + '<%=articleBean.getRelease_time() %>' +
                '</div></div></div><div class="titleBox"><a href="readPage.jsp?id=<%=articleBean.getId() %>">' + '<%=articleBean.getTitle() %>' + '</a></div><div class="metaDescriptionBox">' +
                '<%=articleBean.getMeta_description() %>' +
                '</div><div class="readMoreBox"><a href="readPage.jsp?id=<%=articleBean.getId() %>">' + 'READ MORE →' + '</a></div><div class="bottomLineBox"></div></div>';
            recentArticleHtml += '<div class="rightLabelContentBox"><a href="readPage.jsp?id=<%=articleBean.getId() %>">' + '<%=articleBean.getTitle() %>' + '</a></div>';
            count++;
        }
        if (count <= 10) {
            tenRecentArticleHtml = recentArticleHtml;
        }
        <%
        }
        List<CategoryBean> categoryBeanList=articleDao.selectAllCategory();
        for(CategoryBean categoryBean:categoryBeanList){
        %>
        categoryHtml += '<div class="rightLabelContentBox" onclick="showCategoryArticle(\'' + '<%=categoryBean.getCategory() %>' + '\')">' + '<%=categoryBean.getCategory() %>' + '</div>';
        <%
         }
        %>

        //调整高度
        function adjustHeight() {
            var rightLabelBox = document.getElementById("rightLabelBox");
            var leftContentBox = document.getElementById("leftContentBox");
            var topShowBox = document.getElementById("topShowBox");
            var topShowBoxHerght = topShowBox.clientHeight;
            var leftContentBoxHeight = leftContentBox.clientHeight;
            var rightLabelBoxHeight = rightLabelBox.clientHeight;
            if (leftContentBoxHeight >= rightLabelBoxHeight) {
                document.getElementById("subjectBox").style.height = leftContentBoxHeight + topShowBoxHerght;
            } else {
                document.getElementById("subjectBox").style.height = rightLabelBoxHeight + topShowBoxHerght;
            }
        }

        //插入内容
        function addDiv() {
            document.getElementById("leftContentBox").innerHTML = divHtml;
            document.getElementById("recentArticleContentBox").innerHTML = tenRecentArticleHtml;
            document.getElementById("categoryContentBox").innerHTML = categoryHtml;
            adjustHeight();
        }

        //展示相应分类的文章
        function showCategoryArticle(categoryStr) {
            var params = new URLSearchParams();
            params.append("category", categoryStr)
            axios.post("http://localhost:8080/GetArticleByCategoryServlet", params).then(function (response) {
                var categoryArticleHtml = "";
                var articles = response.data;
                if (articles.length !== 0) {
                    for (var i = 0; i < articles.length; i++) {
                        if (articles[i].state === "已发布") {
                            categoryArticleHtml += '<div class="showBox"><div class="categoryBigBox"><div class="categorySmallBox"><div class="categoryLink" onclick="showCategoryArticle(\'' + articles[i].category + '\')">' + articles[i].category +
                                '</div></div><div class="releaseTimeBox"><div class="categoryLink" onclick="showArticleByTime(\'' + articles[i].release_time + '\')">' + articles[i].release_time +
                                '</div></div></div><div class="titleBox"><a href="readPage.jsp?id=' + articles[i].id + '">' + articles[i].title + '</a></div><div class="metaDescriptionBox">' +
                                articles[i].meta_description +
                                '</div><div class="readMoreBox"><a href="readPage.jsp?id=' + articles[i].id + '">' + 'READ MORE →' + '</a></div><div class="bottomLineBox"></div></div>';
                        }
                    }
                } else {
                    categoryArticleHtml = '<div class="noResultsBox">No Results</div>';
                }

                document.getElementById("leftContentBox").innerHTML = categoryArticleHtml;
                document.getElementById("topShowBox").innerHTML = '<div class="searchShow">Category Results for: <span class="topShowTarget">' + categoryStr + '</span></div>';
                adjustHeight();
            });
        }

        //展示相应发布日期的文章
        function showArticleByTime(time) {
            var params = new URLSearchParams();
            params.append("time", time);
            axios.post("http://localhost:8080/GetArticleByTimeServlet", params).then(function (response) {
                var timeArticleHtml = "";
                var articles = response.data;
                if (articles.length !== 0) {
                    for (var i = 0; i < articles.length; i++) {
                        if (articles[i].state === "已发布") {
                            timeArticleHtml += '<div class="showBox"><div class="categoryBigBox"><div class="categorySmallBox"><div class="categoryLink" onclick="showCategoryArticle(\'' + articles[i].category + '\')">' + articles[i].category +
                                '</div></div><div class="releaseTimeBox"><div class="categoryLink" onclick="showArticleByTime(\'' + articles[i].release_time + '\')">' + articles[i].release_time +
                                '</div></div></div><div class="titleBox"><a href="readPage.jsp?id=' + articles[i].id + '">' + articles[i].title + '</a></div><div class="metaDescriptionBox">' +
                                articles[i].meta_description +
                                '</div><div class="readMoreBox"><a href="readPage.jsp?id=' + articles[i].id + '">' + 'READ MORE →' + '</a></div><div class="bottomLineBox"></div></div>';
                        }
                    }
                } else {
                    timeArticleHtml = '<div class="noResultsBox">No Results</div>';
                }

                document.getElementById("leftContentBox").innerHTML = timeArticleHtml;
                document.getElementById("topShowBox").innerHTML = '<div class="searchShow">Time Results for: <span class="topShowTarget">' + time + '</span></div>';
                adjustHeight();
            });
        }

        //搜索包含相应内容的文章
        function searchArticle(){
            var searchContent=document.getElementById("searchArticle").value;
            if(searchContent!==""){
                var params=new URLSearchParams();
                params.append("searchContent",searchContent);
                axios.post("http://localhost:8080/SearchArticleServlet",params).then(function (response){
                    var searchArticleHtml="";
                    var articles=response.data;
                    if (articles.length !== 0) {
                        for (var i = 0; i < articles.length; i++) {
                            if (articles[i].state === "已发布") {
                                searchArticleHtml += '<div class="showBox"><div class="categoryBigBox"><div class="categorySmallBox"><div class="categoryLink" onclick="showCategoryArticle(\'' + articles[i].category + '\')">' + articles[i].category +
                                    '</div></div><div class="releaseTimeBox"><div class="categoryLink" onclick="showArticleByTime(\'' + articles[i].release_time + '\')">' + articles[i].release_time +
                                    '</div></div></div><div class="titleBox"><a href="readPage.jsp?id=' + articles[i].id + '">' + articles[i].title + '</a></div><div class="metaDescriptionBox">' +
                                    articles[i].meta_description +
                                    '</div><div class="readMoreBox"><a href="readPage.jsp?id=' + articles[i].id + '">' + 'READ MORE →' + '</a></div><div class="bottomLineBox"></div></div>';
                            }
                        }
                    } else {
                        searchArticleHtml = '<div class="noResultsBox">No Results</div>';
                    }

                    document.getElementById("leftContentBox").innerHTML = searchArticleHtml;
                    document.getElementById("topShowBox").innerHTML = '<div class="searchShow">Search Results for: <span class="topShowTarget">' + searchContent + '</span></div>';
                    adjustHeight();
                });
            }
        }
    </script>
</html>
